<template>
  <a-modal width="1200px" v-model:visible="visible" title="切换设备" @before-ok="onOk" :footer="false">
    <GiTable
      row-key="userWechatId"
      id="switchingDevices"
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: 1000, minWidth: 1000 }"
      :pagination="pagination"
      @refresh="getList"
    >
      <template #info="{ record }">
        <div class="flex flex-a-c">
          <ImgHoverPreview :url="record?.wxInfo?.vcHeadImgUrl" round="50%" />
          <div class="ml-8">
            <div>{{ record?.wxInfo?.vcNickName || '--' }}</div>
            <div class="text-size-12">{{ record?.wxInfo?.vcRobotWxId || '--' }}</div>
          </div>
        </div>
      </template>
      <template #action="{ record }">
        <a-button type="text" size="small" @click="switchOther(record.userWechatId)"> 切换 </a-button>
      </template>
    </GiTable>
  </a-modal>
</template>

<script setup>
import { equipmentList } from '@/apis'
import { usePagination } from '@/hooks'
import GiDot from '@/components/GiDot/index.vue'
import { statusArr } from '../../data'
const emit = defineEmits(['switchingDevices'])
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: 10 })
const visible = ref(false)
const userId = ref()
const loading = ref(false)
const tableData = ref([])
const columns = ref([
  {
    title: '设备（微信）信息',
    width: 150,
    slotName: 'info'
  },
  {
    title: '设备状态',
    width: 100,
    align: 'center',
    render: (data) => {
      const status = data.record.status
      const type = statusArr[status] ? statusArr[status].type : 'info'
      const text = statusArr[status] ? statusArr[status].desc : '未知'
      return h(GiDot, {
        animation: false,
        type: type,
        text: text
      })
    }
  },
  {
    title: '操作',
    width: 200,
    fixed: 'right',
    align: 'center',
    slotName: 'action'
  }
])
// 打开编辑框并回显表单值
const getList = async (userIdO) => {
  try {
    loading.value = true
    if (userIdO) {
      userId.value = userIdO
    }
    visible.value = true
    const res = await equipmentList({ userId: userId.value, page: pagination.current })
    tableData.value = res.data.list
    setTotal(res?.data?.meta?.pagination?.total || 0)
  } finally {
    loading.value = false
  }
}

// 切换设备
const switchOther = (userWechatIdO) => {
  emit('switchingDevices', { userWechatId: userWechatIdO })
  visible.value = false
}

defineExpose({ getList })
</script>
<style scoped lang="scss"></style>
